import React, { Component } from 'react';
import { StyleProvider, Root, Icon } from 'native-base';
import {
  StatusBar, Modal, ActivityIndicator, View, DeviceEventEmitter, Platform,
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import Router from '../router';
import getTheme from '../native-base-theme/components';
import variables from '../native-base-theme/variables';

require('../utils/changeDefaultTheme');
// export default () => (
//   <StyleProvider style={getTheme(variables)}>
//     <Root>
//       <Modal
//         visible
//         animationType="none"
//         transparent={false}
//       >
//         <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1, width: '100%', height: '100%', backgroundColor: 'red' }}>
//           <ActivityIndicator size="large" />
//         </View>
//       </Modal>
//       <StatusBar
//         animated
//         hidden={false}
//         backgroundColor="#1a192d"
//         translucent={false}
//         barStyle="light-content"
//       />
//       <Router />
//     </Root>
//   </StyleProvider>
// );

export default class VidioView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      imageModalVisible: false,
      url: '',
    };
  }

  componentDidMount() {
    DeviceEventEmitter.addListener('showLoading', (show) => {
      if (show) {
        this.setState({ modalVisible: true });
      } else {
        this.setState({ modalVisible: false });
      }
    });
    DeviceEventEmitter.addListener('showBigImage', (data) => {
      if (data.show) {
        this.setState({ imageModalVisible: true, url: data.url });
      } else {
        this.setState({ imageModalVisible: false });
      }
    });
  }

  componentWillUnmount() {
    DeviceEventEmitter.removeAllListeners('showLoading');
  }

  onClose = () => {
    this.setState({ modalVisible: false });
  }

  render() {
    return (
      <StyleProvider style={getTheme(variables)}>
        <Root>
          {this.state.imageModalVisible && (
            <Modal
              onRequestClose={() => this.setState({ imageModalVisible: false })}
              animationType="none"
            >
              <Icon name="clear" type="MaterialIcons" style={{ fontSize: 30, color: 'white', left: 10, top: 10, position: 'absolute', zIndex: 1 }} onPress={() => this.setState({ imageModalVisible: false })} />
              <ImageViewer imageUrls={[{ url: this.state.url }]} index={0} />
            </Modal>
          )}
          <Modal
            visible={this.state.modalVisible}
            animationType="none"
            transparent
            onRequestClose={this.onClose}
          >
            <View style={{
              justifyContent: 'center', alignItems: 'center', flex: 1, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.7)',
            }}
            >
              <ActivityIndicator size="large" color="#0000ff" />
            </View>
          </Modal>
          <StatusBar
            animated
            hidden={false}
            backgroundColor="#1a192d"
            translucent={false}
            barStyle="light-content"
          />
          {
            Platform.OS !== 'android' && (
            <View
              style={{ height: 20, width: '100%', backgroundColor: '#1a192d' }}
            />)
          }
          <Router />
        </Root>
      </StyleProvider>
    );
  }
}
